import React, { memo } from 'react';
import { useDispatch } from 'react-redux';
import { NavLink } from 'react-router-dom';
import { getSizeImage } from '../../tools/data_format';
import { getSongDetailAction } from '../player/store/actionCreators';
import { TopRankingWrapper } from './style';

const TopRanking = memo((props) => {
    // state and props 
    const { info=[] } = props
    const { tracks=[] } = info

    //Hooks
    const dispatch = useDispatch()
    
    //function
    const playMusic = (item)=>{
        dispatch(getSongDetailAction(item.id))
    }
    return (
        <TopRankingWrapper>
            <div className="header">
                <div className="image">
                    <img src={ getSizeImage(info.coverImgUrl)} alt=""/>
                    <a href="/todo" className="image_cover removeWarning">ranking</a>
                </div>
                <div className="info">
                    <a href="/">{info.name}</a>
                   <div>
                       <button title='播放' className="btn play sprite_02"></button>
                       <button title='收藏' className="btn favor sprite_02"></button>
                   </div>
                </div>
            </div>
            <div className="list">
                {
                    tracks.slice(0,10).map((item,index)=>{
                        return (
                            <div key={item.id} className="list-item">
                                <div className="info">
                                <div className="rank">
                                    {index+1}
                                 </div>
                                 <NavLink to={{pathname:`/player/${item.id}`,state:{songData:item}}}>
                                    <span href="/inactive" className="name" title={item.name}>{item.name}</span>
                                 </NavLink>
                                 <div className="operate">
                                    <button title="播放" className="btn sprite_02 play" onClick={e =>playMusic(item)}></button>
                                    <button title="添加到播放列表" className="btn sprite_icon2 addto"></button>
                                    <button title="收藏" className="btn sprite_02 favor"></button>
                                  </div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="footer">
                <a href="/todo">查看全部 &gt;</a>
            </div>
        </TopRankingWrapper>
    );
});

export default TopRanking;